<template>
	<div class="app-header" :style="{ background:backgroundColor }">
		<div class="app-header--title">
			<div @click="leftClickEvent()" class="left" v-if="showLeft">
				<slot name="left">
					<img src="@/assets/images/icon-arrow-left-black.png" height="20" />
				</slot>
			</div>
			<div ref="containerRef" class="center">
				<div :style="{transform,color:titleColor}" ref="txtRef" class="center__txt">
					<slot name="center">{{ title }}</slot>
				</div>
			</div>
			<div @click="rightClickEvent" class="right" v-if="showRight">
				<slot name="right"></slot>
			</div>
			<div @click="rightClickEvent" class="text" v-if="showText">
				<slot name="text"></slot>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		onMounted,
		onUnmounted,
		reactive,
		toRefs,
		defineProps,
		ref,
		defineEmits,
	} from "vue";
	const props = defineProps({
		/**
		 * 是否启用标题超长自动滚动效果
		 */
		banAnimate: {
			type: Boolean,
			default: false,
		},
		/**
		 * 是否展示左侧图标
		 */
		showLeft: {
			type: Boolean,
			default: true,
		},
		/**
		 * 是否展示右侧图标
		 */
		showRight: {
			type: Boolean,
			default: true,
		},
		/**
		 * 是否展示右侧文字
		 */
		showText: {
			type: Boolean,
			default: false,
		},
		/**
		 * 页面标题
		 */
		title: {
			type: String,
			default: "",
		},
		//导航栏背景颜色
		backgroundColor: {
			type: String,
			default: '#f5f5f5'
		},
		//标题颜色
		titleColor: {
			type: String,
			default: ''
		}
	});
	const emit = defineEmits(["rightClickEvent", "leftClickEvent"]);
	const containerRef = ref();
	const txtRef = ref();

	const state = reactive({
		transform: {
			transform: `translateX(0)`
		},
		moveLength: 0,
		timeoutTimer: null,
		intervalTimer: null,
	});
	onMounted(() => {
		if (state.banAnimate) return;
		animate();
		if (state.intervalTimer) {
			clearInterval(state.intervalTimer);
		}
		state.intervalTimer = setInterval(() => {
			animate();
		}, 3000 + Math.abs(state.moveLength) * 50);
	});
	onUnmounted(() => {
		clearInterval(state.intervalTimer);
		clearTimeout(state.timeoutTimer);
	});
	const rightClickEvent = () => {
		if (props.showRight) {
			emit("rightClickEvent");
		}
	};
	const leftClickEvent = () => {
		if (props.showLeft) {
			emit("leftClickEvent");
		}
	};
	const animate = async () => {
		if (containerRef && containerRef.value && txtRef && txtRef.value) {
			state.moveLength =
				containerRef.value.offsetWidth - txtRef.value.offsetWidth;
			if (state.moveLength >= 0) {
				clearInterval(state.intervalTimer);
				return;
			}
			await setMoveLength(
				state.moveLength,
				2000 + Math.abs(state.moveLength) * 50,
				false
			);
			setMoveLength(0, 0, true);
		}
	};
	const setMoveLength = (moveLength, time, disable) => {
		return new Promise((resolve) => {
			if (state.timeoutTimer) {
				clearTimeout(state.timeoutTimer);
			}
			state.transform = {
				transform: `translateX(${moveLength}px)`,
				transition: disable ?
					"none" :
					`all ${Math.abs(moveLength) * 0.05}s linear`,
			};
			state.timeoutTimer = setTimeout(() => {
				resolve();
			}, time);
		});
	};

	const {
		transform
	} = toRefs(state);
</script>

<style scoped="scoped" lang="scss">
	.app-header {
		width: 100vw;
		display: flex;
		flex-direction: column;
		// background: #f5f5f5;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 199;

		&--title {
			height: 44px;
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: space-between;

			.left {
				width: 20px;
				height: 20px;
				margin-left: 10px;
				display: flex;
				align-items: center;

				img {
					max-width: auto;
					height: 100%;
					display: block;
				}
			}

			.center {
				overflow: hidden;
				font-size: 18px;
				color: #333333;
				text-align: center;
				font-weight: 500;
				display: flex;
				flex-flow: row nowrap;
				flex-basis: 80%;
				position: relative;
				bottom: 2px;

				&__txt {
					flex: 1;
					white-space: nowrap;
				}
			}

			.text {
				width: max-content;
				margin-right: 10px;
				display: flex;
				align-items: center;
				font-size: 16px;
				color: #8E8E8E;
			}

			.right {
				width: 20px;
				height: 20px;
				margin-right: 10px;
				display: flex;
				align-items: center;

				img {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>